<template>
    <div class="box flex flex-warp">
        <div class="flex-item flex flex-center" v-for="(item, index) in userList" :key="item.name">
            <div class="bg flex flex-align-center flex-btw" :data-index="index + 1">
                <span class="name">{{ item.name }}</span>
                <span class="count">{{ item.count }}</span>
                <div class="gradient-border"></div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, defineEmits, toRefs, onBeforeMount, onMounted, watchEffect, computed, getCurrentInstance } from "vue";
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
// proxy 替代 this
// 路由对象
const route = useRoute();
// 路由实例
const router = useRouter();
// 数据部分
const userList = reactive([
    { name: "厦门用户数", count: 9999 },
    { name: "厦门用户数", count: 9999 },
    { name: "厦门用户数", count: 9999 },
    { name: "厦门用户数", count: 9999 },
    { name: "厦门用户数", count: 9999 },
    { name: "厦门用户数", count: 9999 },
    { name: "厦门用户数", count: 9999 },
    { name: "厦门用户数", count: 9999 },
]);
onBeforeMount(() => {});
onMounted(() => {});
watchEffect(() => {});
// 使用toRefs解构
// let { } = { ...toRefs(data) }
defineExpose({});
</script>
<style scoped lang="scss">
@use "sass:math";
$PI2: math.div(86.6, 100);
.flex-item {
    flex-shrink: 1;
    width: 50%;
    margin: 10px 0;
    .bg {
        position: relative;
        width: 80%;
        flex-shrink: 1;
        background-image: linear-gradient(180deg, rgba(0, 128, 254, 0.1) 2%, rgba(0, 128, 254, 0.2) 100%);
        height: 36px;
        &::before {
            content: attr(data-index);
            position: absolute;
            width: 32px;
            height: 32px * $PI2; /* 高度大约是宽度的 sqrt(3) 倍 */
            background-color: rgb(255, 255, 255, 0.15);
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            left: 4px;
            top: calc((100% - (32px * $PI2)) / 2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }
    }
    .name {
        font-size: 15px;
        padding-left: 45px;
    }
    .count {
        font-size: 13px;
        margin-right: 5px;
    }
    &:first-child {
        .bg {
            background-image: linear-gradient(180deg, rgba(255, 216, 120, 0.1) 2%, rgba(255, 216, 120, 0.2) 100%);
            &::before {
                background-color: rgba(255, 216, 120, 0.15);
                color: rgb(255, 216, 120);
            }
            .gradient-border {
                background-image: linear-gradient(270deg, rgba(255, 216, 120, 0) 0%, #ffd878 52%, rgba(255, 216, 120, 0) 100%);
            }
        }
    }
    &:nth-child(2) {
        .bg {
            background-image: linear-gradient(180deg, rgba(4, 160, 144, 0.1) 2%, rgba(4, 160, 144, 0.2) 100%);
            &::before {
                background-color: rgba(4, 160, 144, 0.15);
                color: rgb(4, 160, 144);
            }
            .gradient-border {
                background-image: linear-gradient(270deg, rgba(4, 160, 144, 0) 0%, #04a090 50%, rgba(4, 160, 144, 0) 100%);
            }
        }
    }
    &:nth-child(3) {
        .bg {
            background-image: linear-gradient(180deg, rgba(0, 128, 254, 0.1) 2%, rgba(0, 128, 254, 0.2) 100%);
            &::before {
                background-color: rgba(0, 128, 254, 0.15);
                color: rgb(0, 128, 254);
            }
        }
    }
}
.gradient-border {
    background-image: linear-gradient(270deg, rgba(0, 128, 254, 0) 0%, #0080fe 49%, rgba(0, 128, 254, 0) 100%);
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
}
</style>
